<template>
	<div class="orderPage">
		<div class="oerderAllPage">
			<div class="top_fixed">
				<div class="to_top">
					<!-- app点餐的title和图标 -->
						<van-row type="flex" >
							  <van-row type="flex" class="titleName">
							    <van-col span="24">
									
									<router-link :to="{name:'homePage'}"> 
									  <van-icon name="wap-home-o" size="26px"/></router-link>
								
							  	  <h4>乡村基点餐</h4>
							    </van-col>
							  </van-row>
						</van-row>
				</div>
			</div>
			
			<div class="order_top">
				<div class="order_top_top">
					<!-- 两端对齐 -->
					<van-row type="flex" justify="space-between">
					  <van-col span="6">
						 <p class="top_title_name">贝蒂餐厅&nbsp;></p>
						 <div class="top_content_distant">
							<img src="../assets/my/地址.png" >
							
							 <div class="distant_text">距离你388m</div>
							 </div>
					  </van-col>
					  <van-col span="6">
						  
						   <div class="box">
						  		<span class="invite">自取</span>
						  		<span>外卖</span>
						  	</div>
					  </van-col>
					</van-row>
				</div>
				<div class="order_top_bottom">
					<!-- 两端对齐 -->
					<van-row type="flex" justify="space-between">
					  <van-col span="6">
						 <p class="bottom_tag_name">指定商品最高立减13.2元</p>
					  </van-col>
					  <van-col span="6"><p class="bottom_more">更多&nbsp;></p></van-col>
					</van-row>
					
				</div>
				
			</div>
			<!-- 菜品分类和菜品 -->
			<div class="order_bottom">
				
				<van-row >
					<!-- 左侧菜单选项 -->
				  <van-col span="6" :class="{fixed:isFixed}"  >
					<van-sidebar v-model="activeKey">
					  <van-sidebar-item v-for="food,index in foods" :key="index"
					   :badge="food.badge"
					  :title="food.type" :url="'/orderPage#'+index" />
					</van-sidebar>  
					  
				  </van-col>
				  <!-- 右侧具体菜品 -->
				  <van-col span="18" class="menu">
					  <div v-for="food,index in foods" :key="index">
						  <p class=" typeName"  :id="index">{{food.type}}</p>
					  	<van-card
						v-for="dish,index in food.dishes"
					  	 :key="index"
					 	 @click="showDishDetail(dish)" 
					  	  :price="dish.price"
					  	  :desc="dish.desc"
					  	  :title="dish.name"
					  	  :thumb="dish.path">
						  <template #footer >
							  <span @click.stop>
								  <van-stepper v-model="dish.num" theme="round" button-size="25" disable-input
								   min="0" @change="changeNum(food,dish)" 
								   :show-input="dish.num>0?true:false"
								   :show-minus="dish.num>0?true:false" />
							  </span>
						
						  	</template>
					  	</van-card>
					  </div>
				  </van-col>
				 
				</van-row>
				
				
			</div>
			
			<!-- 菜品详细 -->
			<div class="dish_detail">
				<van-action-sheet v-model="showDetail" title=" ">
						<div class="content_detail">
						
						<div class="top">
							<img :src="DishDetailArr.path" >
							<p class="title">{{DishDetailArr.name}}</p>
							<p class="contentmore">{{DishDetailArr.desc}}</p>
							<p class="btn">去下单</p>
						</div>
							
						</div>
				</van-action-sheet>
			</div>
			
			
			
			<!-- 购物车 -->
			<div class="order_cart_out" v-show="totalNum">
				<div class="order_cart">
					<van-row>
					  <van-col class="cart_left" span="18" @click="show=true">
						  <van-badge :content="totalNum" >
							<img src="../assets/order/购物袋.png" >
						  </van-badge>
						  <p>{{totalPrice | price}}</p>
						  </van-col>
						  <van-col class="cart_right" span="6">
							  <router-link :to="{path:'/settlePage',query:{check:checkDish}}">
								    <p>去结算</p>
							  </router-link>
						
						  </van-col>
					</van-row>
			
				</div>
			</div>
			
			
		
				<van-action-sheet v-model="show">
					  <div class="content"> 
					  <van-row type="flex" class="shop_title">
						  <van-col span="18"> 
						  <van-checkbox v-model="checked" @click="selectAll()" checked-color="#E60012">全选</van-checkbox>
						   </van-col>
						  <van-col span="6" @click="clear_cart"> 
						  
										<van-icon name="delete-o" />
													  清空购物车  
										 
						  </van-col>
					  </van-row>
					  
					  <van-row type="flex" v-for="(dish,index) in checkDish" :key="index" v-if="dish.num>=1">
						  <van-col span="2">
							  <van-checkbox class="btn" v-model="dish.isChecked" checked-color="#E60012" @click="selectOne(dish)"></van-checkbox>
							  
						  </van-col>
						   <van-col span="22">
							  
							  <van-card
							   
							    :price="dish.price"
							    :desc="dish.desc"
							    :title="dish.name"
							    :thumb="dish.path">
							  <template #footer>
							  <van-stepper v-model="dish.num" theme="round" button-size="25" disable-input
							   min="0"/>
							  	</template>
							  </van-card>
						  </van-col>
						  
					  </van-row>
					  
					  </div>
					 
					  
					</van-action-sheet>
				
			</div>
			
		
	</div>
</template>

<script>
import Vue from 'vue';
import { TreeSelect,Card,Sidebar, SidebarItem ,Stepper,Badge,
 Checkbox, CheckboxGroup,ActionSheet,Dialog     } from 'vant';
 

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(ActionSheet);
Vue.use(TreeSelect);
Vue.use(Stepper);
Vue.use(Card);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Badge);
export default{
	name:'orderPage',
	
	data(){
		return{
		 activeKey: 0,
		 isFixed:false,
		 menu:'menu',
		 show:false,
		 showDetail:false,
		 num:0,
		 checkDish:[],
		 DishDetailArr:[],
		 totalNum:0,
		 totalPrice:0,
		 checked:true,
		 foods:[
			 {
				 type:'新品上线',
				 badge:'',
				 dishes:[
					 {
						 path:require('@/assets/order/xinpin/1.jpg'),
						 name:'蒜香小龙虾蛋包饭',
						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
						 price:28,
						 num:0
					 },
					  {
						 path:require('@/assets/order/xinpin/2.jpg'),
						 name:'虾多多牛扒饭',
						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
						 price:32,
						 num:0
					 },
					  {
						 path:require('@/assets/order/xinpin/3.jpg'),
						 name:'板栗鸡烧饭',
						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
						 price:18,
						 num:0
					 },
					 
				 ]
				 
			 },
			 {
				 type:'超值盖饭',
				 badge:'',
				 dishes:[
					 					 {
					 						 path:require('@/assets/order/xinpin/1.jpg'),
					 						 name:'川式小煎鸡盖饭',
					 						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
					 						 price:16,
											 num:0
					 					 },
					 					  {
					 						 path:require('@/assets/order/xinpin/2.jpg'),
					 						 name:'卤汁烧焦鸡腿拌饭',
					 						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
					 						 price:18,
											 num:0
					 					 },
					 					  {
					 						 path:require('@/assets/order/xinpin/3.jpg'),
					 						 name:'香菇鸡套餐',
					 						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
					 						 price:17,
											 num:0
					 					 },
				 ]
			 },
			 {
				 type:'经典套餐',
				 badge:'',
				 dishes:[
				 					 					 {
				 					 						 path:require('@/assets/order/xinpin/1.jpg'),
				 					 						 name:'蜜蜡烤翅套餐',
				 					 						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
				 					 						 price:25,
															 num:0
				 					 					 },
				 					 					  {
				 					 						 path:require('@/assets/order/xinpin/2.jpg'),
				 					 						 name:'功夫鸡腿套餐',
				 					 						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
				 					 						 price:25,
															 num:0
				 					 					 },
				 					 					  {
				 					 						 path:require('@/assets/order/xinpin/3.jpg'),
				 					 						 name:'川式小炒肉套餐',
				 					 						 desc:'蒜香小龙虾蛋包饭套餐*1、汤*1',
				 					 						 price:20,
															 num:0
				 					 					 },
				 ]
			 },
			 {
				 type:'西式简餐',
				 badge:'',
			 },
			 {
				 type:'精选组合',
				 badge:'',
			 },
			 {
				 type:'骨汤米线',
				 badge:'',
			 },
			 {
				 type:'汉堡套餐',
				 badge:'',
			 },
			 {
				 type:'单点专区',
				 badge:'',
			 },
			 {
				 type:'休闲小吃',
				 badge:'',
			 },
			 {
				 type:'沁心饮品',
				 badge:'',
			 }
			 
		 ]
		}
	},
	created(){
				// 判断是否已经选择地址
				// if(false){
				// 	this.$router.push({name:'addressPage'})
				// }
				
				// 监听滚动条事件
				document.addEventListener('scroll',this.addScroll,true)
			},
	destroyed(){
				// 移除滚动条事件
				document.removeEventListener('scroll',this.addScroll)
				},
	methods:{
				showDishDetail(dish){
					 this.showDetail=true;
					console.log(dish)
					this.DishDetailArr=dish
				
					
					
					
				},
				addScroll(){
					// console.log('滚动条滚动')
					let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
					if(scrollTop>100){
						this.isFixed = true;
					}else{
						this.isFixed = false;
					}
				},
				//改变商品数量
				changeNum(food,dish){
					let sum=0;
					for(let i=0;i<food.dishes.length;i++){
						sum+=food.dishes[i].num;
					}
					// food.dishes.forEach(function(dish){
					// 					sum += dish.num
					// 				})
					
					if(sum==0){
						food.badge='';
					}
					else{
						food.badge=sum;
					}
					// 将商品加入购物车
					//console.log(this.checkDish.indexOf(dish))
					
					 if(this.checkDish.indexOf(dish) ===-1)
						
					//	 dish.isChecked=true;
						 this.checkDish.push(dish)
						this.$set(dish,'isChecked',true)	  
					
				},
				// 购物车单个商品被点击
				selectOne(dish){
				 console.log(dish)
				this.$set(dish,'isChecked',dish.isChecked);
				},
				//清空购物车
				clear_cart(){
					Dialog.confirm({
					  title: '提示',
					  message: '确认清空购物车吗？',
					})
					  .then(() => {
					    // on confirm
						//将购物车内的数据置空
						this.checkDish=[];
						this.show=false;
							//将菜品栏的数据置空
							this.foods.forEach(function(obj){
								obj.badge='';
								obj.dishes.forEach(function(dish){
									dish.num=0;
								})
							})
						
					  })
					  .catch(() => {
					    // on cancel
					  });
				},
				cancel(){
					console.log('取消')
				},
				
				selectAll(){
					
					this.checkDish.forEach((dish)=>{
						dish.isChecked=this.checked;
					})
					
					}
					
			},
		watch:{
			//监听购物车数组是否发生改变
				checkDish:{
					handler(){
						//商品数量 总价清零
						this.totalNum=0;
						this.totalPrice=0;
						
					let AllGoods = [];
					// 循环购物车内所有商品
					this.checkDish.forEach((dish,index)=>{ 
						this.totalNum +=dish.num;
						this.totalPrice+=dish.num*dish.price;
						if(dish.isChecked){
							//判断商品数量是否为0
								AllGoods.push(dish);
							
							}
							else{
								this.checked=false;
								
							}	
						})
					
						//判断是否为全选
						if(this.checkDish.length==AllGoods.length){
							this.checked=true;
						}
						
						
						console.log(this.checkDish)
						
					},
					deep:true
				}
		},
		// 过滤价格
		filters:{
			price(val){
				return '￥'+val.toFixed(2);
			}
		}
		
 }
</script>

<style scoped>
.content_detail{
	
	  padding: 0px 10px 0px 10px;
	
	

}
.content_detail img{
	width: 140px;
	height: 140px;
}
.content_detail .top{

	height: 350px;
}
.content_detail .title{

	font-size: 18px;
	font-weight: 600;
	text-align: left;
	margin-left: 20px;
}
.content_detail .contentmore{
	
	font-size: 13px;
	height: 20px;
	text-align: left;
	color: #A3A3A3;
	margin-left: 20px;
	margin-top: -10px;
}
.content_detail .btn{
	width: 300px;
	height: 40px;
	background-color: #e91f3c;
	color: white;
	line-height: 40px;
	font-weight: 600;
	font-size: 18px;
	border-radius: 25px;
	margin-left: 30px;
	margin-top: 0px;
	
}

.oerderAllPage{
		background-color: #ffffff;
	}
.to_top{
	width:375px;
	height:100px;
	background:#E91F3C;
	color:#fff;
	text-align:center;
	position:fixed;
	margin:0 auto;
	z-index: 10;
	top: 0;
	left: 0;
}
.to_top .titleName{
	width:375px;
	height:40px;
	font-size: 16px;
	position:absolute;
	bottom:0px;
	line-height:0px;
}
.to_top .titleName .van-icon{
	width:30px;
	height:30px;
	line-height:30px;
	border:1px solid #fff;
	border-radius:50%;
	position:absolute;
	left:20px;
}
.order_top{
	width: 375px;
	padding-top: 100px;
	background-color: #ffffff;
	border-radius: 0 0 10px 10px;
	box-shadow:0px 0px 5px #ccc;
}
.order_top_top{
	z-index: 1;
}

.order_top_top  .box{
	width:80px;
	height:30px;
	padding-right:10px;
	background:#eee;
	border-radius:20px;
	text-align:right;
	font:bolder 14px/30px 微软雅黑;
	position:relative;
	left:0px;
	top:10px;
	
}
.order_top_top  .box span{
	color:#666;
	text-align:center;
}
.order_top_top  .box .invite{
	display:inline-block;
	width:45px;
	height:30px;
	background:#E91F3C;
	border-radius:20px;
	color:white;
	position:absolute;
	left:0px;
	top:0px;
}	
	


.order_top_top .top_title_name{
	font-weight: 800;
	font-size: 20px;
	margin-top: 5px;
	text-align: left;
	margin-left: 10px;
	width: 200px;

} 
.order_top_top .top_content_distant{
	display: flex;
	margin-left: 10px;
	width: 200px;
	margin-top: -15px;	
}
.top_content_distant img{
	width: 16px;
	height: 16px;
}
.distant_text{
		font-size: 15px;
		margin-left: 5px;
		line-height: 15px;
		color: #aeaeae;
}

.order_top_bottom .bottom_tag_name{
	font-size: 12px;
	margin-left: 10px;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
	padding-left: 2px;
	padding-right: 2px;
	margin-top: 15px;
	width: 160px;
}
.order_top_bottom .bottom_more{
	color:#c5c5c5;
	right: 10px;

	text-align: right;
	margin-right: 10px;
	margin-top: 8px;
	font-size: 15px;
}

.order_bottom{
	padding-top: 0px;
	margin-top: 5px;
	padding-bottom: 100px;
	
	
}
.van-sidebar-item--select::before{
	width: 0;
}
.van-card{
	background-color: white;
}

.fixed{
	position:fixed;
		top:100px;
		left:0px;
		
}
.menu{
	float: right;	
}
.menu .typeName{
	border-top:100px solid transparent;
	margin-top:-100px;
		
	font-size: 13px;
	text-align: left;
		
	color: #666666;
}
.order_cart_out{
	position: fixed;
	bottom: 50px;
	z-index: 2039;
	width: 375px;
	background-color: white;
	height: 40px;
	
}

.order_cart_out .order_cart{
	position: fixed;
	bottom: 60px;
	
	width: 360px;
	height: 50px;
	left: 7px;
	color: white;
	
		
	
}
.order_cart .cart_left{
	border-radius: 25px 0px 0px 25px;
	height: 50px;
	display: flex;
	
	background-color: #323232;
}

.cart_left  .van-badge__wrapper {
	margin-top: 8px;
	margin-left: 15px;
	}

.cart_left img{
	width: 32px;
	height: 32px;
}
.cart_left p{
	font-size: 25px;
	margin-left:15px;
	margin-top: 10px;
}
.order_cart .cart_right{
	border-radius: 0px 25px 25px 0px;
	height: 50px;
	background-color: #e60012;
}
.order_cart .cart_right p {
	position: relative;
	display: block;
	bottom: 18px;
	font-size: 18px;
	padding: 10px;
	

}
.order_cart .cart_right a{
	text-decoration: none;
	color: #fff;
}

.content {
   padding-bottom: 160px;
	
  }
.content .shop_title{
	font-size: 13px;
	background-color: #f2f2f2;
	box-sizing: border-box;
	padding: 10px;
	text-align: left;
}
.content .btn{
	margin-top: 40px;
	margin-left: 10px;
}
 
a .van-icon {
	color: white;
}


</style>
